<template>
    <div class="">
        <!-- 顶部搜索及频道编辑按钮 -->
        <div class="imgLink">
            <img @click="$router.push('/search')" src="@/assets/img/btn_search.svg" alt="">
            <img @click="show = true" src="@/assets/img/btn_channel.svg" alt="">
        </div>
        <!-- 顶部导航 -->
        <van-tabs sticky color="#FC6627" v-model="id"
                  line-width="30px" title-inactive-color="#9EA1AE"
                  title-active-color="#3A3948" @click="onClick">
            <!-- 频道编辑弹出页 -->
            <van-popup v-model="show" closeable position="left" duration="0.25"
                       :style="{ width: '100%' , height: '100%'}">
                <user-channels
                    :id="id"
                    :show="show"
                    @changeChannel="activeChannel($event)"
                    @saveChannel="init">
                    <!-- changeChannel事件为频道编辑页通知其需要切换到指定的频道列表 -->
                    <!-- saveChannel事件为频道编辑页通知其需要更新频道列表 -->
                </user-channels>
            </van-popup>
            <!-- 列表主体 -->
            <van-tab v-for="e in userChannel" :title="e.name">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                    <!-- 单个文章组件 -->
                    <article-item :dataList="dataList"></article-item>
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { getArticle } from '@/api/article'
import { getUserChannel } from '@/api/channel'

export default {
    name: 'ArticlePage',
    data () {
        return {
            // 当前频道的id
            id: 0,
            userChannel: [],
            dataList: [],
            loading: false,
            finished: false,
            // 频道页弹出状态
            show: false
        }
    },
    methods: {
        // 获取频道
        async init () {
            const res = await getUserChannel()
            this.userChannel = res.data.data.channels

        },
        // 加载文章列表
        async onLoad () {
            const res = await getArticle({
                channel_id: this.id,
                timestamp: +new Date()
            })
            this.dataList = this.dataList.concat(res.data.data.results)
            this.loading = false
        },
        // 点击切换相应频道的列表
        onClick (name) {
            this.id = +name
            this.dataList = []
            this.onLoad()
            this.loading = true
        },
        // 切换相应频道的列表
        activeChannel (index) {
            this.onClick(index)
            this.show = false
        }
    },
    created () {
        this.init()
    }
}
</script>

<style scoped lang="less">
* {
    box-sizing: border-box;
}

.imgLink {
    width: 100px;
    height: 44px;
    position: fixed;
    z-index: 999;
    transform: translate(275px, 0px);
    justify-content: right;
    align-items: center;
    display: flex;
    background-image: linear-gradient(90deg, transparent 0, white 20%);
    pointer-events: none;

    > img {
        width: 18px;
        height: 45px;
        margin: 0 10px 0 10px;
        pointer-events: auto;
    }
}

::v-deep .van-sticky {
    border-bottom: 1px solid #F0F0F0;
}

::v-deep .van-icon {
    top: 10px;
    right: 10px;
}

::v-deep .van-tabs__wrap--scrollable {
    padding-right: 75px;
}
</style>
